<template>
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <div class="sigin">
        <van-form @submit="onSubmit" label-align="left">
            <van-cell-group inset>
                <van-field v-model="form.user_acc" name="账号" label="账号" placeholder="用户名/邮箱" />
                <van-field v-model="form.user_pwd" type="password" name="密码" label="密码" placeholder="密码" />

            </van-cell-group>

            <div style="margin: 16px;">
                <van-button round block color="#FF2A43" native-type="submit">
                    登录账号
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script lang="ts" setup>
import { useRouter , useRoute } from 'vue-router'
import { reactive } from 'vue'
import { loginFunc } from '../api/index'
import { showToast } from 'vant'

const $router = useRouter()
const $route = useRoute()
const onClickLeft = () => {
    // console.log('返回')
    $router.back();
}

// 定义变量 记表单信息
let form: any = reactive({
    user_acc: '',
    user_pwd: '',
})
form.user_acc =  $route.query?.email;

let d;
// user_acc（账号   user_pwd（密码） user_nick_name(昵称) code(邮箱验证码)
// 提交表单信息的方法
const onSubmit = async () => {
    // console.log(form);
    let { user_acc, user_pwd } = form;
    // 执行注册的接口
    await loginFunc({ user_acc, user_pwd })
        .then(
            (content: any) => {
                // console.log('1.0', content)
                // 注册成功跳转
                if (content.code == 200) {
                     // 提示
                    showToast({
                        icon: 'success',
                        message:content.msg
                    })
                    
                    // 缓存token在本地
                    localStorage.setItem("auto_token", content.token);
                    localStorage.setItem("user_nick_name", content.user_nick_name);

                    // 跳转主页
                    d = setTimeout(() => {
                        $router.push({
                            path:'/home'
                        })
                    }, 300)

                }
                else {
                    showToast(content.msg);
                     // 提示
                    //  showToast({
                    //     icon: 'none',
                    //     message:content.msg
                    // })
                }
            },
            err => {
                showToast(err.msg)
            }
        )
};
</script>

<style lang="less">
@import '@/static/less/common.less';

:root {
    --van-nav-bar-icon-color: #000;
    /* --aaa: red; */
}

.sigin {
    margin-top: 2.6667rem;
}
</style>